<script setup>
import FilterBar from '@/components/FilterBar.vue'
import { onMounted, inject, reactive } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  info: {},
  selectValue: 'day',
})

onMounted(() => {
  getChartData()
})

function getChartData() {
  $http.get('/screen/page/report', { params: { scope: dataObj?.selectValue } }).then(res => {
    const { data = {} } = res || {}
    const { zrs = 0, hsjcl = 0, gfx = 0, hc = 0, ctqc, zj = 0 } = data || {}

    dataObj.info = {
      zs: zrs || 0,
      jcl: hsjcl || 0,
      dgfx: gfx || 0,
      hcfh: hc || 0,
      qcfh: ctqc || 0,
      zjfh: zj || 0,
    }
  })
}

function change(item = {}) {
  dataObj.selectValue = item?.value || ''

  getChartData()
}
</script>

<template>
  <div class="populationDataBox">
    <FilterBar class="filterBox" :selectValue="dataObj.selectValue" @change="change" />

    <div class="peopleNumBox">
      <div class="peopleNum">
        <div class="numBox">
          <img class="icon" src="@/assets/returnTown/icon1.png" />

          <div class="numData">
            <div class="name">返乡总人数</div>

            <div class="num">{{ dataObj.info.zs }}<span class="unit">人</span></div>
          </div>
        </div>

        <div class="numBox">
          <img class="icon" src="@/assets/naTest/icon2.png" />

          <div class="numData">
            <div class="name">返乡人员核酸检测率</div>

            <div class="num jclNum">{{ dataObj.info.jcl }}<span class="unit">%</span></div>
          </div>
        </div>

        <div class="numBox">
          <img class="icon" src="@/assets/naTest/icon3.png" />

          <div class="numData">
            <div class="name">到达过高风险人数</div>

            <div class="num wjNum">{{ dataObj.info.dgfx }}<span class="unit">人</span></div>
          </div>
        </div>
      </div>

      <div class="peopleNum">
        <div class="numBox">
          <img class="icon" src="@/assets/returnTown/icon1.png" />

          <div class="numData">
            <div class="name">通过火车返乡</div>

            <div class="num">{{ dataObj.info.hcfh }}<span class="unit">人</span></div>
          </div>
        </div>

        <div class="numBox">
          <img class="icon" src="@/assets/returnTown/icon1.png" />

          <div class="numData">
            <div class="name">通过长途汽车返乡</div>

            <div class="num">{{ dataObj.info.qcfh }}<span class="unit">人</span></div>
          </div>
        </div>

        <div class="numBox">
          <img class="icon" src="@/assets/returnTown/icon1.png" />

          <div class="numData">
            <div class="name">通过自驾返乡</div>

            <div class="num">{{ dataObj.info.zjfh }}<span class="unit">人</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.populationDataBox {
  width: 696px;
  height: 245px;
  background: rgba(19, 181, 177, 0.2);
  display: flex;
  flex-direction: column;

  .filterBox {
    margin: 13px 16px 24px 16px;
  }

  .peopleNumBox {
    flex: 1;
    padding: 0 16px 29px 16px;

    .peopleNum {
      display: flex;

      &:not(:first-child) {
        margin-top: 50px;
      }

      .numBox {
        flex: 1;
        display: flex;
        align-items: center;

        &:not(:first-child) {
          margin-left: 16px;
        }

        .icon {
          width: 50px;
          height: 50px;
        }

        .numData {
          flex: 1;
          align-items: center;
          margin-left: 7px;

          .name {
            height: 20px;
            font-size: 14px;
            color: #ffffff;
            display: flex;
            align-items: center;
          }

          .num {
            margin-top: 7px;
            height: 29px;
            font-size: 24px;
            font-weight: bold;
            font-family: Tahoma-Bold, Tahoma;
            color: #ffffff;
            line-height: 1;
            background: linear-gradient(180deg, #64cdab 0%, #49d0ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            .unit {
              margin-left: 4px;
              font-size: 14px;
              color: #ffffff;
              background: #ffffff;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }

          .wjNum {
            background: linear-gradient(180deg, #f9784f 0%, #fba365 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .jclNum,
          .jclNum .unit {
            background: linear-gradient(180deg, #44c5f5 0%, #6e7be8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }
}
</style>
